<template>
  <view class="container">
    <!-- 用户栏 -->
    <view class="user-bar">
      <view class="user-avatar"></view>
      <view class="user-info">
        <view class="user-name">uuuh3940...</view>
        <view class="user-desc">神券膨胀省更多</view>
      </view>
    </view>

    <!-- 我的神券区域 -->
    <view class="coupon-section">
      <view class="section-header">
        <view class="section-title">
          <text class="coupon-tag">神券包</text>
          <text class="coupon-tag">10张券</text>
          我的神券
        </view>
        <view class="section-more">可用12张 ></view>
      </view>
      <view class="coupon-list">
        <view class="coupon-item" v-for="(item, index) in couponList" :key="index">
          <view class="coupon-amount">¥{{ item.amount }}</view>
          <view class="coupon-threshold">{{ item.threshold }}</view>
          <button class="coupon-btn">{{ item.btnText }}</button>
          <view class="coupon-expire">{{ item.expire }}</view>
        </view>
      </view>
      <button class="expand-btn">
        <text class="expand-amount">¥18</text> 天天膨一下，随机掉落18元外卖神券
      </button>
    </view>

    <!-- 神券包区域 -->
    <view class="coupon-pack-section">
      <view class="section-header">
        <view class="section-title">神券包</view>
        <view class="section-more">更多 ></view>
      </view>
      <view class="pack-desc">31天内有效 | 膨胀后门槛随机</view>
      <view class="pack-list">
        <view class="pack-item" v-for="(item, index) in packList" :key="index">
          <view class="pack-amount">{{ item.amount }}</view>
          <view class="pack-count">{{ item.count }}</view>
          <view class="pack-expand-tag" v-if="item.expandTag">{{ item.expandTag }}</view>
          <view class="pack-price" v-if="item.price">
            ¥{{ item.price }} <text class="pack-original-price">¥{{ item.originalPrice }}</text>
          </view>
          <button class="pack-btn" v-if="item.btnText">{{ item.btnText }}</button>
          <view class="pack-discount" v-if="item.discount">{{ item.discount }}</view>
        </view>
      </view>
      <view class="tag-bar">
        <view class="tag-text">吃喝玩乐都能用</view>
        <view class="tag-icon"></view>
        <view class="tag-text">旅游度假</view>
        <view class="tag-icon"></view>
        <view class="tag-icon"></view>
        <view class="tag-icon"></view>
        <view class="tag-more">全部</view>
      </view>
    </view>

    <!-- 签到区域 -->
    <view class="sign-section">
      <view class="sign-title">签到领神券</view>
      <view class="sign-rule">本周10.14-11.24 | 规则</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      couponList: [
        { amount: 3, threshold: '无门槛', btnText: '最高至20', expire: '11.28日到期' },
        { amount: 11, threshold: '满25可用', btnText: '去使用', expire: '明日到期' },
        { amount: 11, threshold: '满28可用', btnText: '去使用', expire: '明日到期' }
      ],
      packList: [
        { 
          amount: '5元 ×6张', 
          count: '无门槛', 
          expandTag: '可免费膨胀', 
          price: 18, 
          originalPrice: 30, 
          discount: '惊喜折扣减12元' 
        },
        { 
          amount: '5元 ×12张', 
          count: '无门槛', 
          expandTag: '可免费膨胀', 
          btnText: '购买', 
          price: 36, 
          originalPrice: 60, 
          discount: '惊喜折扣减24元' 
        },
        { 
          amount: '5元 ×20张', 
          count: '无门槛', 
          expandTag: '可免费膨胀', 
          btnText: '购买', 
          price: 60, 
          originalPrice: 100, 
          discount: '惊喜折扣减40元' 
        }
      ]
    };
  }
}
</script>

<style>
/* 通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "微软雅黑", sans-serif;
}

.container {
  padding-bottom: 50px; /* 底部导航栏高度 */
  background-color: #f5f5f5;
}

/* 用户栏 */
.user-bar {
  height: 60px;
  background: linear-gradient(to right, #ff4d4f, #ff6768);
  display: flex;
  align-items: center;
  padding: 0 15px;
  color: #fff;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: #ffd700;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-size: 14px;
}

.user-desc {
  font-size: 12px;
  opacity: 0.8;
}

/* 通用区域样式 */
.coupon-section,
.coupon-pack-section,
.sign-section {
  background: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.section-more {
  font-size: 12px;
  color: #999;
}

/* 我的神券区域 */
.coupon-tag {
  background: #ff4d4f;
  color: #fff;
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-right: 5px;
}

.coupon-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.coupon-item {
  min-width: 120px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
}

.coupon-amount {
  font-size: 20px;
  color: #ff4d4f;
  font-weight: bold;
}

.coupon-threshold {
  font-size: 12px;
  color: #666;
  margin: 5px 0;
}

.coupon-btn {
  width: 100%;
  height: 25px;
  background: #ffd700;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: #333;
}

.coupon-expire {
  font-size: 10px;
  color: #999;
  margin-top: 5px;
}

/* 膨胀按钮 */
.expand-btn {
  width: 100%;
  height: 40px;
  background: #ffd700;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.expand-amount {
  color: #ff4d4f;
  font-weight: bold;
}

/* 神券包区域 */
.pack-desc {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.pack-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.pack-item {
  min-width: 100px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.pack-amount {
  font-size: 18px;
  color: #ff4d4f;
  font-weight: bold;
}

.pack-count {
  font-size: 12px;
  color: #666;
}

.pack-expand-tag {
  background: #ff4d4f;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  margin: 5px 0;
  display: inline-block;
}

.pack-price {
  font-size: 12px;
  margin-top: 5px;
}

.pack-original-price {
  text-decoration: line-through;
  color: #999;
  margin-left: 3px;
}

.pack-btn {
  width: 100%;
  height: 25px;
  background: #ffd700;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  color: #333;
  margin-top: 5px;
}

.pack-discount {
  font-size: 10px;
  color: #ff4d4f;
  margin-top: 3px;
}

/* 标签栏 */
.tag-bar {
  background: #fff9e6;
  padding: 8px 15px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.tag-text {
  font-size: 12px;
  color: #333;
}

.tag-icon {
  width: 16px;
  height: 16px;
  background: #ccc;
  border-radius: 2px;
}

.tag-more {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

/* 签到区域 */
.sign-title {
  font-size: 16px;
  font-weight: bold;
}

.sign-rule {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>